// @import "_base.scss";
// @import "_mixin.scss";
// @import "_reset.scss";
// @import "_common.scss";

/*|   参数配置                           
 ------------------------------------------------------------*/
// 设计稿宽度,默认缩放比：2
$plan_width: 750px;
// rem单位初始化
html {
	font-size: round($plan_width / 10);
}
//网站主色 primary color bgcolor
$c0: #fff;
$c1: #ffe5b7; // 橙 ff8c65 ffab6f
$c2: #4d93ff; // 红  ff0204 c2282a
$c3: #ff8c50; // 蓝
$c4: #6ec39a; // 绿
$c5: #07e; // 链接用
//灰度色 用于字体
$fc1: #333;
$fc2: #666;
$fc3: #999;
$fc4: #bbb;
$fc5: #ccc;
// 背景色
// $bgc1: #113eb0;
$bgc2: rgba(2, 1, 1, 0.07);
// 线框色
$bdc1: rgba(0, 0, 0, 0.15);
$bdc2: rgba(0, 0, 0, 0.1);
$bdc3: rgba(0, 0, 0, 0.07);
$bdc4: rgba(0, 0, 0, 0.03);
// 动画时长
$ad1: 0.13s;
$ad2: 0.18s;
// 视频比例
$videoScale: 375 / 667;

/*|  公共函数                           
 ------------------------------------------------------------*/
// 像素转换rem：依赖设计稿宽度
@function px2rem($px) {
	@if (unitless($px)) {
		@return px2rem($px + 0px);
	} @else if (unit($px) == rem) {
		@return $px;
	}
	@return ($px / $plan_width) * 10rem;
}
// 像素适配
@mixin px2px($name, $px) {
	#{$name}: round($px / 2) + 0;

	[data-dpr="1.5"] & {
		#{$name}: round($px * 0.75) + 0;
	}

	[data-dpr="2"] & {
		#{$name}: round($px) + 0;
	}

	[data-dpr="2.5"] & {
		#{$name}: round($px * 1.25) + 0;
	}

	[data-dpr="2.75"] & {
		#{$name}: round($px * 2.75 / 2) + 0;
	}

	[data-dpr="3"] & {
		#{$name}: round($px * 1.5) + 0;
	}

	[data-dpr="3.5"] & {
		#{$name}: round($px * 1.75) + 0;
	}

	[data-dpr="4"] & {
		#{$name}: round($px * 2) + 0;
	}
}
// 页面主体定宽居中 body center
@mixin bct1 {
	width: px2rem(672px);
	padding-left: px2rem(24px);
	padding-right: px2rem(24px);
}
@mixin bct2 {
	width: px2rem(672px);
	margin-right: auto;
	margin-left: auto;
}
// 常用属性封装
@mixin top($px) {
	@include px2px(top, $px);
}
@mixin bottom($px) {
	@include px2px(bottom, $px);
}
@mixin height($px) {
	@include px2px(height, $px);
}
@mixin line_height($px) {
	@include px2px(line-height, $px);
}
@mixin margin_top($px) {
	@include px2px(margin-top, $px);
}
@mixin margin_bottom($px) {
	@include px2px(margin-bottom, $px);
}
@mixin padding_top($px) {
	@include px2px(padding-top, $px);
}
@mixin padding_bottom($px) {
	@include px2px(padding-bottom, $px);
}
// 顶部和底部悬浮元素高度
$h1: 110px;
@mixin t1 {
	// @include top($h1);
	top: px2rem($h1);
}
@mixin b1 {
	// @include bottom($h1);
	bottom: px2rem($h1);
}
@mixin h1 {
	// @include height($h1);
	height: px2rem($h1);
}
@mixin lh1 {
	// @include line_height($h1);
	line-height: px2rem($h1);
}
@mixin pt1 {
	// @include padding_top($h1);
	padding-top: px2rem($h1);
}
@mixin pb1 {
	// @include padding_bottom($h1);
	padding-bottom: px2rem($h1);
}
@mixin mt1 {
	// @include margin_top($h1);
	margin-top: px2rem($h1);
}
@mixin mb1 {
	// @include margin_bottom($h1);
	margin-bottom: px2rem($h1);
}
// 字体适配 单位：px
@mixin font_size($font_size) {
	@include px2px(font-size, $font_size);
}
// 字体大小
@mixin fs0 {
	@include font_size(8px * 2);
	font-size: px2rem(8px * 2);
}
@mixin fs1 {
	@include font_size(10px * 2);
	font-size: px2rem(10px * 2);
}
@mixin fs2 {
	@include font_size(12px * 2);
	font-size: px2rem(12px * 2);
}
@mixin fs3 {
	@include font_size(14px * 2);
	font-size: px2rem(14px * 2);
}
@mixin fs4 {
	@include font_size(16px * 2);
	font-size: px2rem(16px * 2);
}
@mixin fs5 {
	@include font_size(18px * 2);
	font-size: px2rem(18px * 2);
}
@mixin fs6 {
	@include font_size(24px * 2);
	font-size: px2rem(24px * 2);
}
@mixin fs7 {
	@include font_size(32px * 2);
	font-size: px2rem(32px * 2);
}
@mixin fs8 {
	@include font_size(40px * 2);
	font-size: px2rem(40px * 2);
}
@mixin fs9 {
	@include font_size(48px * 2);
	font-size: px2rem(48px * 2);
}
// 统一的圆角
@mixin bdrs {
	border-radius: px2rem(10px);
}
// 统一的阴影
@mixin bs1 {
	box-shadow: 0 px2rem(2px) px2rem(8px) 0 rgba(0, 0, 0, 0.1);
}
@mixin bs2 {
	box-shadow: 0 px2rem(2px) px2rem(12px) 0 rgba(0, 0, 0, 0.11);
}
@mixin bs3 {
	box-shadow: 0 px2rem(4px) px2rem(18px) 0 rgba(0, 0, 0, 0.13);
}
// 清除容器自身浮动
@mixin cs {
	&::after {
		display: block;
		visibility: hidden;
		clear: both;
		overflow: hidden;
		height: 0;
		content: "";
	}
}
// 不换行显示省略号
@mixin toe {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-wrap: normal;
}
// 强制文本换行
@mixin wwb {
	white-space: normal;
	word-wrap: break-word;
	word-break: break-all;
}
// 无法选择文字
@mixin usn {
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
// 绝对定位居中
@mixin hub {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
//遮蔽盒子
@mixin shield {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

/*|  样式重置                           
 ------------------------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); //修改移动端难看的点击的高亮效果，iOS和安卓下都有效
	// -webkit-touch-callout: none; // 禁止 iOS 弹出各种操作窗口
	// -webkit-user-select: none; // 禁止ios和android用户选中文字
	// line-height：normal; // input的placeholder会出现文本位置偏上的情况
}

html {
	height: 100%;
}

body {
	@include fs3;
	height: 100%;
	// font-family: "Microsoft YaHei";
	background-color: #fff !important;
	background-attachment: fixed;
	color: $fc1;
	overflow-x: hidden;
	font-family: "Helvetica Neue","Helvetica","Roboto","Segoe UI","Arial","sans-serif";
}

a {
	text-decoration: none;
	cursor: pointer;

	&:hover {
		text-decoration: none;
	}
}

li {
	list-style-type: none;
}

img {
	border: none;
	display: block;
}

i {
	font-style: normal;
}

b {
	font-weight: normal;
}

table {
	border-collapse: collapse;
}

button,
input,
select,
textarea {
	outline: none;
	border: none;
	background-color: transparent;
}

button,
input[type="button"],
input[type="submit"] {
	cursor: pointer;
}

textarea {
	overflow: auto;
	resize: none;
}

a,
button,
input {
	&:hover {
		transition: all 0.15s;
		-webkit-touch-callout: none;
	}
}

a,
b,
div,
i,
p,
span {
	max-height: 999999px;
}
.fr {
	float: right;
}
.fl {
	float: left;
}
.clear {
	@include cs;
}

@keyframes slideInRight {
	from {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		visibility: visible;
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
.slideInRight {
	animation: slideInRight 0.4s 0s ease-in-out;
}

@keyframes scale_in {
	0% {
		transform: scale(0.3);
		opacity: 0.3;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes fade_in_up {
	0% {
		transform: translate3d(0, px2rem(360px), 0);
		opacity: 0.3;
	}

	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}
@keyframes fade_in_right {
	0% {
		transform: translate3d(px2rem(-360px), 0, 0);
		opacity: 0.3;
	}

	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}
.a-scale-in {
	animation: scale_in $ad2 ease-in;
}
.a-fade-in-up {
	animation: fade_in_up $ad2 ease-in;
}
.a-fade-in-right {
	animation: fade_in_right $ad2 ease-in;
}
#play{
	width: 100%;
	overflow: hidden;
	position: relative;
}
.j-msg {
	@extend .a-fade-in-up;
	position: fixed;
	z-index: 11000;
	bottom: px2rem(150px);
	left: 0;
	right: 0;
	margin: 0 auto;
	width: px2rem(580px);
	color: rgba(#fff, 0.8);
	text-align: center;

	span {
		@include fs2;
		@include bs3;
		@include bdrs;
		padding: px2rem(10px) px2rem(20px);
		// padding-left: px2rem(60px);
		line-height: px2rem(30px);
		display: inline-block;
		background-color: rgba(#000, 0.8);

		i {
			position: relative;
			display: none;
			top: 4px;
			margin: 0 6px 0 -30px;
			width: 18px;
			height: 18px;
			border-radius: 100%;
			// background-color: #fff;
		}

		&.z-success {
			i {
				background-color: rgba(#0f0, 0.7);

				&::after {
					content: "";
					position: absolute;
					top: 0;
					bottom: 3px;
					right: 0;
					left: 0;
					margin: auto;
					width: 8px;
					height: 6px;
					border-left: 2px solid rgba(#fff, 0.95);
					border-bottom: 2px solid rgba(#fff, 0.95);
					transform: rotate(-45deg);
				}
			}
		}

		&.z-warning {
			i {
				background-color: rgba(#ff0, 0.7);

				&::after,
				&::before {
					content: "";
					position: absolute;
					top: 0;
					bottom: 4px;
					right: 0;
					left: 0;
					margin: auto;
					width: 3px;
					height: 7px;
					background-color: rgba(#fff, 0.95);
				}

				&::after {
					top: 8px;
					bottom: 0;
					height: 3px;
					transform: rotate(-45deg);
					border-radius: 3px;
				}
			}
		}

		&.z-error {
			i {
				background-color: rgba(#f50, 0.75);

				&::after,
				&::before {
					content: "";
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					margin: auto;
					width: 13px;
					height: 2px;
					background-color: rgba(#fff, 0.95);
					transform: rotate(45deg);
				}

				&::after {
					transform: rotate(-45deg);
				}
			}
		}
	}
}

/*|  主体页面                           
 ------------------------------------------------------------*/
body {
	// background-color: #000;
	// background-color: $bgc1;
	width: px2rem(750px);
	// height: 100%;
	margin: 0 auto;
	-webkit-overflow-scrolling: touch; //滚动卡顿问题
}
// 页面大背景
#web_bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: px2rem(750px);
	height: px2rem(1100px);
	transform: translateY(-env(safe-area-inset-bottom));
	z-index: -10;
	zoom: 1;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.m-close {
	position: absolute;
	z-index: 100;
	top: px2rem(50px);
	right: px2rem(30px);
	width: px2rem(32px);
	height: px2rem(32px);

	img {
		display: block;
		width: px2rem(32px);
		height: px2rem(32px);
	}
}

.head {
	position: absolute;
	top: 0;
	margin: px2rem(50px) px2rem(35px);
	padding: px2rem(4px) px2rem(30px) px2rem(4px) 0;
	height: px2rem(60px);
	line-height: px2rem(35px);
	background:rgba(51,51,51,0.6);
	border-radius: px2rem(32px);

	.img {
		box-sizing: border-box;
		position: relative;
		display: block;
		width: px2rem(60px);
		height: px2rem(60px);
		border: px2rem(1px) solid $c1;
		border-radius: 100%;
		overflow: hidden;

		img {
			position: absolute;
			display: block;
			top: -100px;
			left: -100px;
			right: -100px;
			bottom: -100px;
			margin: auto;
			width: px2rem(60px);
			height: px2rem(60px);
		}
	}
	

	.head-info{
		position: static;
		-webkit-transform: none;
		transform: none;
		width: auto;
		max-width: px2rem(480px);
		height: px2rem(60px);
		p {
			@include fs2;
			display: inline-block;
			color: $c1;
			width: auto;
			line-height: px2rem(30px);
			margin-left: px2rem(10px);
			&.title{
				display: block;
				font-size: px2rem(26px);
				text-overflow: ellipsis;/*超出部分省略*/
				white-space: nowrap;
				overflow:hidden; 
			}
		}
		div{
			@include cs;
			height: px2rem(30px);
			padding-top: px2rem(4px);
			img{
				float: left;
				width: px2rem(50px);
				height: px2rem(24px);
				margin-left: px2rem(20px);
			}
			h5{
				float: left;
				color: rgba(255, 255, 255, 0.6);
				margin-left: px2rem(10px);
				@include fs2;
				line-height: px2rem(24px);
				font-weight: 400;
			}
		}
	}
}

.TVintroduce {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(#000, 0.5);

	.introduce {
		position: absolute;
		z-index: 1000;
		top: px2rem(800px);
		left: 0;
		right: 0;
		margin: 0 auto;
		width: px2rem(600px);
		height: px2rem(300px);
		.introduce-bg{
			display: block;
			position: absolute;
			z-index: 1000;
			width: px2rem(600px);
		}
		.introduce-title{
			display: block;
			position: absolute;
			z-index: 1000;
			top: px2rem(40px);
			left: px2rem(280px);
			width: px2rem(300px);
		}
		a{
			display: block;
			position: absolute;
			z-index: 1000;
			top: px2rem(150px);
			left: px2rem(280px);
			width: px2rem(300px);
			img{
				width: 100%;
			}
		}
	}
}

.u-bottom-tag {
	height: 0;
}
.m-video {
	position: relative;
	margin-top: px2rem(340px);
	margin-bottom: px2rem(20px);
	height: px2rem(710px * $videoScale);
	.countdown-mark{
		box-sizing: border-box;
		position: absolute;
		width: px2rem(722px);
		height: px2rem(722px * $videoScale);
		top: 0;
		left: px2rem(14px);
		border-radius: px2rem(10px);
		background: rgba(0, 0, 0, 0.7);
		z-index: 40;
		color: #fff;
		text-align: center;
		padding-top: px2rem(100px);
		h5{
			font-size: px2rem(28px);
			font-weight: 400;
			margin-bottom: px2rem(20px);
		}
		h4{
			font-size: px2rem(72px);
			font-weight: 400;
			span{
				font-size: px2rem(32px);
			}
		}
		&.z-top{
			left: 0;
			width: px2rem(750px);
			height: px2rem(750px * $videoScale);
		}
	}

	.video {
		position: relative;
		display: block;
		margin: 0 auto;
		width: px2rem(722px);
		height: px2rem(722px * $videoScale);
		overflow: hidden;
		border-radius: px2rem(10px);
		overflow: hidden;
		z-index: 20;

		.shade {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
		}

		.disern-hint {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
			background: rgba(0, 0, 0, 0.85);
			img {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: px2rem(296px);
			}
		}

		&.z-top {
			position: fixed;
			z-index: 20;
			top: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: px2rem(750px);
			height: px2rem(750px * $videoScale);

			.prism-player {
				width: px2rem(750px);
				height: px2rem(750px * $videoScale);
				border-radius: 0;
				overflow: visible;
			}

			.live-over-show {
				// border-radius: 0;
			}
		}

		&.z-full {
			position: fixed;
			z-index: 101;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100vh;
			background-color: #000000;
			overflow: visible;

			.prism-player {
				width: 100%;
				height: 100%;
				border-radius: 0;
				overflow: visible;
			}

			.live-over-show {
				border-radius: 0;
			}
		}

		.prism-player {
			position: relative;
			z-index: 30;
			display: block;
			height: px2rem(710px * $videoScale);
			// height: px2rem(380px);
			border-radius: px2rem(20px);
			background-color: #000000;
			background-position: center;
			background-size: 100% 100%;
			overflow: hidden;
			transform: width $ad2 ease, height $ad2 ease;

			&.z-hide {
				video {
					display: none;
				}
			}
		}

		.close-btn {
			position: absolute;
			z-index: 50;
			top: px2rem(30px);
			right: px2rem(40px);

			img {
				display: block;
				width: px2rem(36px);
				height: px2rem(36px);
			}
		}

		&.z-full {
			.video-controller {
				transform: translateY(-env(safe-area-inset-bottom));
				bottom: px2rem(10px);
				right: px2rem(30px);
			}
			.live-over-show {
				border-radius: 0;
			}
		}
		// 分辨率按钮
		.video-controller.videoQuality {
			top: 0;
			left: 0;
			width: 100%;
			text-align: right;
			// bottom: px2rem(0);
			display: flex;
			border-radius: px2rem(20px);
			justify-content: flex-end;
			align-content: center;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%);
			height: px2rem(90px);
			.gqbtn {
				margin-top: px2rem(20px);
				margin-right: px2rem(30px);
				padding: px2rem(4px) px2rem(16px);
				border-radius: px2rem(30px);
				border: px2rem(2px) solid rgba(247, 248, 250, 1);
				height: px2rem(36px);
				line-height: px2rem(36px);
				img {
					width: px2rem(30px);
					vertical-align: middle;
					display: inline-block;
				}
				span {
					font-size: px2rem(22px);
					font-family: PingFangSC;
					font-weight: 400;
					color: rgba(247, 248, 250, 1);
				}
			}
		}
		//分辨率选择
		.video-controller.chooseQuality {
			top: 0;
			right: 0;
			width: 28%;
			height: 100%;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
			display: flex;
			flex-flow: column;
			align-items: center;
			.huazhi {
				height: px2rem(34px);
				padding: px2rem(28px) 0 0;
				text-align: center;
				img {
					width: px2rem(36px);
					vertical-align: middle;
					display: inline-block;
				}
				span {
					height: px2rem(60px);
					font-size: px2rem(26px);
					font-family: PingFangSC;
					font-weight: 500;
					color: rgba(247, 248, 250, 1);
					line-height: px2rem(28px);
				}
			}
			.quality {
				li {
					display: flex;
					margin: px2rem(30px) 0;
					border-radius: px2rem(30px);
					border: 1px solid rgba(0, 0, 0, 0);
					color: rgba(247, 248, 250, 0.5);
					font-size: px2rem(26px);
					padding: px2rem(8px) px2rem(16px);
					justify-content: center;
					align-content: center;
					p:nth-child(1) {
						margin-top: px2rem(2px);
					}
				}
				.active {
					border: 1px solid rgba(22, 226, 185, 1);
					color: rgba(22, 226, 185, 1);
				}
			}
		}

		.video-controller {
			position: absolute;
			z-index: 50;
			right: px2rem(25px);
			bottom: px2rem(12px);
			height: px2rem(60px);
			overflow: hidden;

			.gqbtn {
				position: relative;
				float: right;
				display: block;
				margin-left: 0.53333rem;
				// width: 0.8rem;
				padding: 0px 10px;
				height: px2rem(60px);
				line-height: px2rem(58px);
				opacity: 0.9;
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: px2rem(40px);
				img {
					width: px2rem(46px);
					vertical-align: middle;
					display: inline-block;
					// margin-right:4px;
				}
				span {
					font-size: px2rem(26px);
					font-family: PingFangSC;
					font-weight: 400;
					color: rgba(247, 248, 250, 1);
				}
			}
			.video-btn {
				position: relative;
				float: right;
				display: block;
				margin-left: px2rem(40px);
				width: px2rem(60px);
				height: px2rem(60px);
				opacity: 0.9;
				background-color: rgba(#000, 0.2);
				border-radius: px2rem(20px);

				&.z-on {
					img {
						&:nth-child(1) {
							display: none;
						}

						&:nth-child(2) {
							display: block;
						}
					}
				}

				img {
					position: absolute;
					display: block;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					height: px2rem(36px);
					background-size: px2rem(36px);
					background-position: center;
					background-repeat: no-repeat;

					&:nth-child(1) {
						display: block;
					}

					&:nth-child(2) {
						display: none;
					}
				}
			}
		}

		.SDFullScreen {
			position: absolute;
			bottom: px2rem(47px);
			left: px2rem(96px);
			// z-index:1002;
			z-index: 2147483647;
			// width:100%;
			// background:red;
			display: block;
			.huazhi {
				height: px2rem(20px);
				line-height: px2rem(20px);
				img {
					width: px2rem(36px);
					vertical-align: middle;
					display: inline-block;
				}
				span {
					height: px2rem(28px);
					font-size: px2rem(26px);
					font-family: PingFangSC;
					font-weight: 500;
					color: rgba(247, 248, 250, 1);
					line-height: px2rem(28px);
				}
			}
			.quality {
				display: flex;
				margin-top: px2rem(40px);
				li {
					width: px2rem(140px);
					height: px2rem(140px);
					background: rgba(0, 0, 0, 0.5);
					border-radius: px2rem(30px);
					border: 1px solid rgba(0, 0, 0, 0);
					display: flex;
					align-items: center;
					justify-content: center;
					flex-flow: column;
					color: #f7f8fa;
					margin-right: px2rem(34px);
					cursor: pointer;
					font-size: px2rem(26px);
				}
				.active {
					border: 1px solid rgba(22, 226, 185, 1);
					color: rgba(22, 226, 185, 1);
				}
			}
		}

		.video-info {
			position: absolute;
			z-index: 60;
			top: px2rem(20px);
			left: px2rem(40px);
			width: px2rem(500px);
			height: px2rem(48px);
			line-height: px2rem(48px);
			opacity: 0.85;

			&.z-fs {
				transform: scale(0.5), translateX(px2rem(-48px));
			}

			.video-logo {
				display: inline-block;
				margin-right: px2rem(8px);
				width: px2rem(48px);
				height: px2rem(48px);
				border-radius: 100%;
				vertical-align: bottom;
				overflow: hidden;
			}

			.video-view {
				@include fs1;
				// display: inline-block;
				color: #ffffff;
			}
		}

		.live-over-show {
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 99;
			width: 100%;
			height: 100%;
			border-radius: px2rem(20px);
		}

		.discern-info {
			position: absolute;
			z-index: 50;
			background-image: linear-gradient(to top, rgba(#033, 0.98), rgba(#033, 0.2) 50%, rgba(#033, 0));
			bottom: 0;
			left: 0;
			width: 100%;
			height: px2rem(360px);

			.discern-box {
				// position: relative;

				.img-box {
					position: absolute;
					bottom: px2rem(30px);
					left: px2rem(30px);
					width: px2rem(320px);
					height: px2rem(180px);
					overflow: hidden;
					background-color: #000;
					border-radius: px2rem(4px);

					.face-show {
						@include bs2;
						position: absolute;
						display: block;
						top: -1000px;
						left: -1000px;
						bottom: -1000px;
						right: -1000px;
						margin: auto;
						width: px2rem(320px);
						height: px2rem(180px);
						opacity: 0.6;

						&.z-active {
							opacity: 0.8;
						}
					}

					.face-border {
						position: absolute;
						box-sizing: border-box;
						width: px2rem(130px);
						height: px2rem(130px);
						z-index: 10;
						// transform: translate(-50%, -50%);
						opacity: 0.5;
						border: 1px solid rgba(#2cf9e1, 0.5);
						background-color: rgba(#2cf9e1, 0.1);

						&.z-on {
							opacity: 0.98;
							z-index: 5;
						}

						> img {
							position: absolute;
							display: block;
							width: px2rem(25px);
							height: px2rem(25px);

							&:nth-child(1) {
								top: px2rem(-3px);
								left: px2rem(-3px);
							}
							&:nth-child(2) {
								top: px2rem(-3px);
								right: px2rem(-3px);
								transform: rotate(90deg);
							}
							&:nth-child(3) {
								bottom: px2rem(-3px);
								right: px2rem(-3px);
								transform: rotate(180deg);
							}
							&:nth-child(4) {
								bottom: px2rem(-3px);
								left: px2rem(-3px);
								transform: rotate(270deg);
							}
						}
					}

					.face-border2 {
						position: absolute;
						display: block;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						width: px2rem(296px);
						height: px2rem(166px);
					}
				}

				.text-wrap {
					position: absolute;
					bottom: px2rem(30px);
					left: px2rem(380px);
					width: px2rem(700px);
					height: px2rem(180px);
					color: #ffffff;

					.text-box {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						.p1 {
							@include fs3;
							line-height: px2rem(60px);
						}
						.p2 {
							@include fs1;
							line-height: px2rem(40px);
						}
						a {
							@include fs1;
							line-height: px2rem(60px);
							color: #00ffe5;
						}
						.p3 {
							position: relative;
							left: px2rem(-5px);
							height: px2rem(70px);
							margin-bottom: px2rem(10px);
							overflow: hidden;

							> img {
								display: block;
								float: left;
								box-sizing: border-box;
								width: px2rem(70px);
								height: px2rem(70px);
								border: 1px solid #fff;
								border-radius: 100%;
							}

							> div {
								position: relative;
								float: left;
								margin-left: px2rem(20px);
								width: px2rem(140px);
								height: px2rem(70px);
								line-height: px2rem(70px);
								text-align: center;

								img {
									position: absolute;
									z-index: 0;
									top: 0;
									bottom: 0;
									left: 0;
									margin: auto 0;
									display: block;
									width: px2rem(126px);
									height: px2rem(38px);
								}

								span {
									position: relative;
									z-index: 1;
									@include fs1;
									color: #00ffe5;
								}
							}
						}
						.p4 {
							@include fs1;
							line-height: px2rem(32px);
							max-height: px2rem(32px * 2);
							overflow: hidden;
							> span {
								margin-right: px2rem(50px);
							}
						}
					}
				}
			}
		}
	}
	// 
	.audio{
		position: absolute;
		width: px2rem(400px);
		height: px2rem(40px);
		z-index: 32;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		img{
			float: left;
			width: px2rem(80px);
			height: px2rem(40px);
		}
		p{
			float: left;
			line-height: px2rem(40px);
			font-size: px2rem(32px);
			color: #3B7CFF;
			margin: 0 px2rem(30px);
		}
	}
	.play-error{
		position: absolute;
		width: px2rem(722px);
		height: px2rem(722px * $videoScale);
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 34;
		img{
			width: 100%;
			height: 100%;
			border-radius: px2rem(10px);
		}
		&.z-top{
			top: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: px2rem(750px);
			height: px2rem(750px * $videoScale);
		}
	}
}


.TVBox {
	position: fixed;
	z-index: 50;
	bottom: px2rem(180px);
	right: px2rem(10px);
	width: px2rem(100px);
	height: px2rem(100px);
	transition: transform 0.5s;
	transform: rotate(-30deg) translateX(px2rem(50px));

	> div {
		transition: transform 0.25s ease-in-out;

		&.z-dim {
			transform: rotate(330deg) translateX(px2rem(60px));
		}
	}

	.i-close {
		position: absolute;
		top: px2rem(-30px);
		right: px2rem(10px);
		width: px2rem(30px);
	}

	.tv-img {
		width: px2rem(100px);
	}
	&.out{
		transition: transform 0.5s;
		transform: rotate(0) translateX(px2rem(0));
	}
}

.m-box {
	position: relative;
	display: none;
	padding: px2rem(20px) 0;
	height: px2rem(110px);
	color: $c1;

	.title {
		padding-top: px2rem(5px);

		span {
			@include fs1;
			display: block;
			text-align: center;
			line-height: px2rem(36px);

			&.z-stress {
				@include fs3;
				line-height: px2rem(50px);
			}
		}
	}
}

.content {
	position: relative;
	box-sizing: border-box;
	margin-top: px2rem(-750px * $videoScale);
	padding-top: px2rem(750px * $videoScale);
	height: 100vh;
	overflow: hidden;
	&.z-top{
		.aboutMe{
			height: 100vh;
		}
	}
}
.chat {
	position: absolute;
	box-sizing: border-box;
	border-radius: px2rem(30px) px2rem(30px) 0 0;
	background-color: #ffffff;
	height: 100%;
	.nav {
		// @include cs;
		position: relative;
		z-index: 10;
		height: px2rem(80px);
		line-height: px2rem(80px);
		border-bottom: 0.5px solid rgba(217, 218, 228, 0.3);
		border-radius: px2rem(30px) px2rem(30px) 0 0;
		// overflow: hidden;

		&.z-3 {
			li {
				width: px2rem(550px / 2);
			}
		}

		li {
			@include fs3;
			position: relative;
			z-index: 12;
			display: block;
			float: left;
			width: px2rem(750px / 2);
			text-align: center;
			font-weight: bold;
			color: $fc4;

			&.active {
				color: $fc1;

				&:after {
					position: absolute;
					content: "";
					z-index: 12;
					left: 0;
					bottom: 0;
					right: 0;
					margin: 0 auto;
					width: px2rem(60px);
					height: px2rem(6px);
					border-radius: px2rem(6px);
					background-color: $c2;
					transform: translateY(1px);
				}
			}

			&:nth-child(1) {
				&:before {
					position: absolute;
					content: "";
					top: 0;
					bottom: 0;
					right: 0;
					margin: auto 0;
					width: 1px;
					height: px2rem(36px);
					background-color: #d9dae4;
				}
			}

			&:nth-child(3) {
				@include fs2;
				float: right;
				width: px2rem(200px);
				background-color: $c2;
				color: #ffffff;
				font-weight: normal;
				border-radius: 0 px2rem(30px) 0 0;

				img {
					position: relative;
					top: px2rem(4px);
					display: inline-block;
					margin-right: px2rem(6px);
					width: px2rem(26px);
					// vertical-align: bottom;
				}
			}
		}
	}

	.chatWindow {
		position: relative;
		height: calc(100% - px2rem(80px));

		.sys {
			position: absolute;
			z-index: 80;
			top: px2rem(20px);
			left: 0;
			opacity: 0.9;

			.system {
				@include fs2;
				@include bs3;
				position: relative;
				margin: px2rem(30px) 0;
				padding-right: px2rem(30px);
				color: rgba(255, 255, 255, 0.8);
				background: rgba(#3b7cff, 0.8);
				box-shadow: 0 px2rem(3px) px2rem(10px) 0px rgba(9, 0, 109, 0.4);
				border-radius: 0px px2rem(30px) px2rem(30px) 0px;
				line-height: px2rem(56px);

				span {
					&:nth-child(2) {
						text-decoration: underline;
						color: rgba(255, 255, 255, 1);
						font-weight: 500;
						margin-right: px2rem(4px);
					}
				}

				img {
					vertical-align: middle;
					display: inline-block;
					width: px2rem(60px);
					height: px2rem(60px);
					margin: px2rem(-26px) px2rem(10px) 0 0;
					opacity: 0.8;
				}
			}
		}

		.show {
			position: relative;
			box-sizing: border-box;
			height: 100vh;
			padding: px2rem(20px) 0;
			padding-bottom: px2rem(620px);
			overflow-x: hidden;
			overflow-y: auto;
			// z-index:10;
			// border-radius: 2px;
			color: $fc1;
			-ms-overflow-style: none;
			scrollbar-width: none;

			ul {
				.self {
					display: flex;
					flex-flow: row-reverse;
				}

				li {
					&.clear {
						display: flex;
						flex-flow: row;

						.ava {
							margin: px2rem(30px) px2rem(4px) 0 px2rem(30px);
						}
					}

					.ava {
						margin: px2rem(30px) px2rem(30px) 0 px2rem(4px);

						img {
							width: px2rem(70px);
							height: px2rem(70px);
							border-radius: 100%;
						}
					}

					.label {
						max-width: 64.6%;
						margin: px2rem(20px) 0;
						margin-right: px2rem(40px);
						position: relative;
						z-index: 5;

						.message img {
							display: inline-block;
							vertical-align: middle;
							width: px2rem(40px);
							height: px2rem(40px);
						}

						.upload-pic {
							display: block;
							margin: 0 auto;
							width: 95%;
						}

						.cont {
							@include fs2;
							position: relative;
							width: fit-content;
							right: 0;
							background: rgba(255, 255, 255, 1);
							margin-left: px2rem(20px);
							border-radius: px2rem(30px);
							padding: px2rem(16px) px2rem(20px);
							line-height: px2rem(40px);
							font-family: PingFangSC-Regular;
							font-weight: 400;
							color: rgba(88, 94, 119, 1);
							box-shadow: 0 px2rem(3px) px2rem(10px) 0px rgba(0, 0, 30, 0.1);

							&.right {
								float: right;
								margin-right: px2rem(20px);
								width: fit-content;
								background: #4d93ff;
								font-family: PingFangSC-Regular;
								font-weight: 400;
								color: rgba(255, 255, 255, 1);
								line-height: px2rem(36px);
							}
						}

						.left {
							&:after {
								content: "";
								position: absolute;
								z-index: 10;
								top: px2rem(20px);
								left: px2rem(-15px);
								width: 0;
								height: 0;
								border-top: px2rem(2px) solid transparent;
								border-bottom: px2rem(28px) solid transparent;
								border-right: px2rem(20px) solid #ffffff;
							}
						}

						.right {
							&:before {
								content: "";
								position: absolute;
								z-index: 10;
								top: px2rem(20px);
								right: px2rem(-32px);
								width: 0;
								height: 0;
								border-top: px2rem(4px) solid transparent;
								border-bottom: px2rem(28px) solid transparent;
								border-left: px2rem(20px) solid #4d93ff;
								border-right: px2rem(20px) solid transparent;
							}
						}
					}

					.name {
						@include fs1;
						height: px2rem(20px);
						line-height: px2rem(20px);
						color: #a9aab6;
						font-family: PingFangSC-Medium;
						font-weight: 500;
						margin: 0 px2rem(10px) px2rem(20px);
						padding-left: px2rem(30px);

						&.s-office {
							color: #4d93ff;
						}

						span {
							@include fs1;
							display: inline-block;
							text-align: center;
							margin-left: px2rem(8px);
							width: px2rem(60px);
							height: px2rem(30px);
							line-height: px2rem(30px);
							background: rgba(77, 147, 255, 1);
							border-radius: px2rem(8px);
							font-family: PingFangSC-Medium;
							font-weight: 500;
							color: rgba(255, 255, 255, 1);
						}
					}
				}
			}
		}
	}
}

.m-fm {
	position: fixed;
	z-index: 100;
	width: px2rem(750px);
	min-height: px2rem(100px);
	height: px2rem(100px);
	left: 0;
	right: 0;
	bottom: 0;
	transform: translateY(-env(safe-area-inset-bottom));
	margin: 0 auto;
	background-color: #fff;
	box-shadow:0px -4px 10px 0px rgba(0,0,0,0.05);

	.shade {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 2;
	}

	.send {
		margin: 0 auto;
		padding: px2rem(16px) px2rem(20px);
		height: px2rem(70px);
		overflow: hidden;
		&.z-focus {
			.btn {
				display: block;
			}

			.text {
				width: px2rem(420px);
			}
		}

		.btn {
			@include fs2;
			margin-left: px2rem(20px);
			width: px2rem(120px);
			height: px2rem(70px);
			line-height: px2rem(70px);
			text-align: center;
			border-radius: px2rem(10px);
			background:rgba(59,124,255,1);
			color: #fff;
		}

		> img {
			display: block;
			margin-top: px2rem(6px);
			margin-left: px2rem(20px);
			width: px2rem(58px);
			height: px2rem(58px);
		}

		.text {
			position: relative;
			width: px2rem(570px);
			height: px2rem(70px);
			border-radius: px2rem(10px);
			background-color: #f7f7f7;
			background-position: 20px center;
			background-repeat: no-repeat;
			background-size: px2rem(40px) px2rem(38px);
			transition: width $ad2 ease-in;

			
		}
		input {
			@include fs2;
			position: absolute;
			display: block;
			top: 0;
			left: px2rem(40px);
			bottom: 0;
			// width: px2rem(400px);
			width: 80%;
			margin: auto 0;
			line-height: px2rem(50px);
			height: px2rem(50px);
			color: $fc1;

			&::placeholder {
				color: rgba(136, 147, 172, 1);
			}
		}
		
		.text-bg{
			background-image: url("../assets/talk.png");
		}
	}

	.emoji {
		> ul {
			padding-bottom: px2rem(30px);
			overflow: hidden;
			li {
				float: left;
				display: block;
				margin-top: px2rem(30px);
				margin-left: px2rem(30px);
				width: px2rem(60px);
				height: px2rem(60px);

				img {
					display: block;
					width: px2rem(60px);
					height: px2rem(60px);
				}
			}
		}
	}

	.pic {
		padding: px2rem(30px) px2rem(50px);

		img {
			display: block;
			width: px2rem(112px);
			height: px2rem(112px);
		}
		span {
			@include fs2;
			display: block;
			margin-top: px2rem(10px);
			width: px2rem(112px);
			line-height: px2rem(40px);
			text-align: center;
			color: $fc1;
		}
		input {
			display: none;
		}
	}
}

.aboutMe {
	position: relative;
	box-sizing: border-box;
	padding-bottom: px2rem(500px);
	overflow-x: hidden;
	overflow-y: auto;
	// z-index:10;
	// border-radius: 2px;
	color: $fc1;
	-ms-overflow-style: none;
	scrollbar-width: none;

	.m-info {
		padding: px2rem(40px);
		// border-bottom: px2rem(20px) solid #f7f7f7;

		.box1 {
			img {
				display: block;
				width: px2rem(100px);
				height: px2rem(36px);
			}
		}
		.h2 {
			@include fs5;
			color: $fc1;
			margin: px2rem(30px) 0;
			line-height: 1;
			font-weight: bold;
		}
		.h2-h {
			@include fs4;
			color: $fc1;
			margin: px2rem(30px) 0;
			line-height: 1;
			font-weight: bold;
		}
		.h2-special {
			@include fs4;
			color: $fc1;
			margin: px2rem(40px) 0 px2rem(20px);
			line-height: 1;
			font-weight: bold;
		}
		.h3 {
			@include fs3;
			color: #999999;
			margin-bottom: px2rem(40px);
			line-height: 1;
			font-weight: bold;
		}
		.h5 {
			@include fs2;
			color: #999999;
			margin-bottom: px2rem(20px);
			line-height: 1;
		}
		.tag-list {
			margin: px2rem(20px) 0;
			overflow: hidden;
			line-height: px2rem(40px);

			> div {
				@include fs1;
				float: left;
				margin-right: px2rem(10px);
				padding: 0 px2rem(10px);
				color: $fc1;
				border: 1px solid #666;
				border-radius: px2rem(10px);
				font-weight: bold;
			}
		}
		ul {
			> li {
				box-sizing: border-box;
				@include fs3;
				width: 100%;
				padding: px2rem(25px) 0;
				padding-left: px2rem(80px);
				background-position: px2rem(20px) px2rem(29px);
				background-repeat: no-repeat;
				background-size: px2rem(30px);
				background-color: rgba(247,247,247,0.7);
				border-radius:5px;
				line-height: px2rem(40px);
				color: $fc1;
				margin-bottom: px2rem(30px);
				&.exercise-time{
					background-image: url("../assets/shijian.png");
				}
				&.exercise-address{
					background-image: url("../assets/zhiyuandidian7.png");
				}
				&.sponsor{
					background-image: url("../assets/gongsi.png");
				}

				> p {
					&.z-weaken {
						@include fs2;
						line-height: px2rem(60px);
						color: #a9aab6;
					}
				}
			}
		}
	}

	.m-info {
		position: relative;
		.activeBox {

			&.z-unfold {
				max-height: px2rem(500px);
				overflow: hidden;
			}

			.btn {
				@include cs;
				padding-bottom: px2rem(30px);

				> span {
					@include fs3;
					float: left;
					display: block;
					background-color: #ffffff;
					margin: 0 px2rem(70px / 2);
					width: px2rem(160px);
					line-height: px2rem(70px);
					border-radius: px2rem(70px);
					text-align: center;
					color: #a9aab6;
					font-weight: bold;

					&.active {
						@include bs2;
						color: $fc1;
						// box-shadow: 0 px2rem(2px) px2rem(10px) 0 rgba(#000, 0.1);
					}
				}
			}
		}

		.showMore {
			@include fs2;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: px2rem(20px);
			padding: px2rem(40px) 0 px2rem(25px);
			line-height: px2rem(20px);
			text-align: center;
			color: $c2;
			// background-color: rgba(#ffffff, 0.3);
			background-image: linear-gradient(to top, rgba(#fff, 0.98), rgba(#fff, 0.98) 60%, rgba(#fff, 0.2));

			img {
				margin-left: px2rem(5px);
				display: inline-block;
				height: px2rem(20px);
				vertical-align: bottom;
			}
		}
		.fold {
			@include bs3;
			@include fs2;
			position: absolute;
			z-index: 10;
			box-sizing: border-box;
			right: 0;
			top: 50%;
			padding: px2rem(10px) 0;
			width: px2rem(120px);
			height: px2rem(60px);
			background-color: $c2;
			border-radius: px2rem(60px) 0 0 px2rem(60px);
			text-align: center;
			color: #ffffff;
			line-height: px2rem(40px);

			img {
				display: inline-block;
				width: px2rem(40px);
				vertical-align: bottom;
			}
		}

		.detail {
			img {
				width: 100%;
				height: px2rem(280px);
				border-radius: px2rem(20px);
			}

			> p {
				@include fs3;
				padding: px2rem(20px) 2px;
				line-height: px2rem(40px);
				color: $fc1;
				white-space: pre-wrap;
			}
		}

		.process {
			> ul {
				@include fs3;

				> li {
					@include bs2;
					box-sizing: border-box;
					margin: px2rem(20px) auto;
					padding: px2rem(25px) px2rem(20px);
					width: px2rem(670px);
					line-height: px2rem(40px);
					border-radius: px2rem(10px);

					span {
						// display: inline-block;
						&:nth-child(1) {
							margin-right: px2rem(20px);
							color: $fc1;
						}
						&:nth-child(2) {
							color: #a9aab6;
						}
					}
				}
			}
		}

		.honer {
			min-height: px2rem(100px);
			> ul {
				@include cs;
				width: px2rem(650px);
				margin: 0 auto;
				margin-top: -px2rem(30px);

				> li {
					@include bs2;
					width: px2rem(300px);
					height: px2rem(200px);
					border-radius: px2rem(20px);
					margin-top: px2rem(112px);

					&:nth-child(2n + 1) {
						float: left;
					}
					&:nth-child(2n) {
						float: right;
					}

					> img {
						// @include bs1;
						margin-top: px2rem(-56px);
						margin-left: auto;
						margin-right: auto;
						display: block;
						width: px2rem(100px);
						height: px2rem(100px);
						border: px2rem(6px) solid #eee;
						border-radius: 100%;
						background-color: #ffffff;
					}
					> div {
						text-align: center;
						margin-top: px2rem(10px);
						h3 {
							@include fs3;
							@include toe;
							padding: px2rem(10px);
							color: $fc1;
							line-height: px2rem(30px);
						}
						h4 {
							@include fs2;
							color: $fc3;
							padding: px2rem(10px);
							line-height: px2rem(30px);
							font-weight: normal;
						}
					}
				}
			}
		}
	}

	.m-info {
		.recommen {
			> h3 {
				@include fs4;
				margin-bottom: px2rem(30px);
				line-height: px2rem(40px);
				color: $fc1;
			}

			.otherVedio {
				@include cs;
				margin-bottom: px2rem(60px);

				.banner {
					display: block;
					float: left;
					width: px2rem(153px * 2);
					height: px2rem(91px * 2);
					background-color: #f7f7f7;
					border-radius: px2rem(20px);
					box-shadow: 0 px2rem(5px) px2rem(10px) 0 rgba(#000, 0.1);
				}

				.font {
					float: left;
					padding: px2rem(10px) 0;
					width: px2rem(160px * 2);
					margin-left: px2rem(30px);

					.title {
						@include fs3;
						color: $fc1;
						line-height: px2rem(40px);
						font-weight: bold;
					}

					.state {
						@include fs1;
						margin-top: px2rem(30px);
						line-height: px2rem(18px * 2);

						.state-sign {
							display: inline-block;
							margin-right: px2rem(30px);
							width: px2rem(50px * 2);
							color: #ffffff;
							background-color: $c2;
							border-radius: px2rem(18px * 2);
							text-align: center;

							> span {
								position: relative;
								display: inline-block;
								top: px2rem(4px);
								width: px2rem(4px);
								height: px2rem(11px * 2);
								border-radius: px2rem(4px);
								background-color: #ffffff;

								&.sign2 {
									top: px2rem(0);
									height: px2rem(7px * 2);
								}
								&.sign3 {
									top: px2rem(0);
									height: px2rem(8px * 2);
								}
							}
						}
						.watch {
							color: $fc3;
						}
					}
				}
			}
		}
	}
}
// ----------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------

// 同屏播放z-index=30，touch-mark=40，语音直播=32，状态遮罩=34
// verticalScreen
#play2{
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
	transition: all 0.3s;
	.touch-mark{
		position: absolute;
		top: 0;
		left: 0;
		width: 200%;
		height: calc(100% - 100px);
		overflow: hidden;
		.touch-left{
			position: relative;
			float: left;
			width: 50%;
			height: 100%;
		}
		.touch-right{
			position: relative;
			float: left;
			width: 50%;
			height: 100%;
		}
		z-index: 31;
	}
	.m-fm{
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 41;
		.send{
			height: px2rem(60px);
		}
		input{
			height: px2rem(60px);
		}
		&.small{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
			width: px2rem(250px);
			height: px2rem(60px);
			min-height: px2rem(60px);
			margin-top: px2rem(20px);
			border-radius: px2rem(30px);
			left: px2rem(20px);
			bottom: 80px;
			color: #fff;
			line-height: px2rem(60px);
			.send{
				padding: 0;
				margin: 0;
				width: px2rem(250px);
				height: px2rem(60px);
				.btn{
					display: none;
				}
			}
			input{
				width: px2rem(180px);
				height: px2rem(60px);
				left: 0;
				padding-left: px2rem(70px);
				background:rgba(51,51,51,0.7);
				border-radius: px2rem(30px);
				background-image: url(../assets/write.png);
				background-size: px2rem(30px) px2rem(30px);
				background-position: px2rem(24px) px2rem(16px);
				background-repeat: no-repeat;
				color: #fff;
				font-size: px2rem(28px);
				&::-webkit-input-placeholder {
					color: #FFFFFF;
					font-size: px2rem(28px);
				}
				&::-moz-input-placeholder {
					color: #FFFFFF;
					font-size: px2rem(28px);
				}
				&::-ms-input-placeholder {
					color: #FFFFFF;
					font-size: px2rem(28px);
				}
			}
		}
	}
	.head{
		position: absolute;
		height: px2rem(60px);
		z-index: 40;
		width: auto;
		padding-right: px2rem(20px);
		.head-info{
			position: static;
			-webkit-transform: none;
			transform: none;
			width: auto;
			max-width: px2rem(480px);
			height: px2rem(60px);
			p {
				@include fs2;
				display: inline-block;
				color: $c1;
				width: auto;
				line-height: px2rem(30px);
				margin-left: px2rem(10px);
				&.title{
					display: block;
					font-size: px2rem(26px);
					text-overflow: ellipsis;/*超出部分省略*/
					white-space: nowrap;
					overflow:hidden; 
				}
			}
			h5{
				color: rgba(255, 255, 255, 0.6);
				margin-left: px2rem(10px);
				@include fs2;
				line-height: px2rem(30px);
				font-weight: 400;
			}
		}
		&.z-top{
			top: px2rem(360px);
			z-index: 40;
			background:rgba(51,51,51,0.6);
			border-radius: px2rem(30px);
			&.vertical-head{
				top: 0;
			}
		}
	}
	.m-video {
		margin-top: 0;
		margin-bottom: 0;
		&.vertical{
			width: 100vw;
			height: 100vh;
			
			.play-error{
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				z-index: 40;
				img{
					width: 100%;
					height: 100%;
					border-radius: px2rem(10px);
				}
			}
			.video{
				width: 100%;
				height: 100%;
				&.z-top{
					position: fixed;
					z-index: 20;
					top: 0;
					left: 0;
					right: 0;
					margin: 0 auto;
					width: 100%;
					height: 100%;
				}
				.prism-player{
					width: 100%;
					height: 100%;
				}
			}
			.countdown-mark{
				width: 100%;
				height: 100%;
				left: 0;
				padding-top: px2rem(360px);
				z-index: 31;
			}
		}
	}
	.content{
		position: absolute;
		width: px2rem(500px);
		height: px2rem(500px);
		bottom: 0;
		left: px2rem(20px);
		margin: 0;
		padding: 0;
		z-index: 40;
		.chat{
			width: 100%;
			height: 100%;
			background-color: transparent;
			.chatWindow{
				height: 100%;
				.weclome-box{
					height: px2rem(80px);
					.weclome{
						width: px2rem(400px);
						background-image: url(../assets/welocone.png);
						background-size: px2rem(480px) px2rem(80px);
						color: #FFE5B7;
						font-size: px2rem(24px);
						line-height: px2rem(64px);
						padding-left: px2rem(80px);
					}
				}
				.show{
					position: absolute;
					max-height: px2rem(290px);
					height: auto;
					padding-bottom: 0;
					padding-top: 0;
					bottom: px2rem(80px);
					&::-webkit-scrollbar {
						display: none;
					}
					ul{
						li{
							margin-bottom: px2rem(10px);
							font-size: px2rem(24px);
							line-height: px2rem(32px);
							div{
								display: inline-block;
								padding: px2rem(6px) px2rem(20px);
								background:rgba(51,51,51,0.6);
								border-radius: px2rem(20px);
								color: #FFFFFF;
								span{
									color: #EEE49C;
								}
								&.sys-msg{
									color: #9DE9F2;
									span{
										color: #FD946C;
										font-weight: 700;
									}
								}
							}
						}
					}
				}
				
			}
		}
	}
	.show-about{
		position: absolute;
		height: px2rem(180px);
		width: px2rem(40px);
		right: 0;
		bottom: px2rem(90px);
		z-index: 40;
		img{
			height: px2rem(180px);
			width: px2rem(40px);
		}
	}
	.about-mark{
		box-sizing: border-box;
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 100vh;
		z-index: 50;
		overflow: hidden;
		background: transparent;
		transition: all 0.3s;
		.aboutMe{
			top: 30vh;
			height: 70vh;
			padding-bottom: 0;
			background-color: #fff;
			border-radius: px2rem(30px) px2rem(30px) 0 0;
			transition: all 0.3s;
			.about-tag{
				position: absolute;
				top: px2rem(20px);
				left: 0;
				right: 0;
				margin: 0 auto;
				width:px2rem(80px);
				height:px2rem(8px);
				background:rgba(51,51,51,1);
				border-radius:px2rem(4px);
				opacity:0.12;
			}
		}
		&.show{
			top: 0;
			transition: all 0.3s;
		}
	}
}

// 

/*|  登陆样式                           
 ------------------------------------------------------------*/
 .dialog-mark{
	box-sizing: border-box;
	position: fixed;
	z-index: 110;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
 }
 .dialog {
	box-sizing: border-box;
	position: absolute;
	z-index: 110;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: px2rem(700px);
	height: px2rem(500px);
	padding: px2rem(60px);
	border-radius: 5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: rgba(#fff, 0.1);
	&.bind{
		height: px2rem(560px);
		background: #131F4B;
		h3{
			font-size: px2rem(32px);
			line-height: px2rem(100px);
			color: #fff;
			text-align: center;
		}
		.btn{
			height: px2rem(60px);
			background:rgba(59,124,255,1);
			border-radius:2px;
			border:1px solid rgba(59,124,255,1);
			color: #fff;
			text-align: center;
			font-size: px2rem(24px);
			line-height: px2rem(60px);
		}
	}
}
.form {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: relative;
	width: px2rem(550px);
	// height: px2rem(700px);
	-ms-flex-negative: 0;
	flex-shrink: 0;
	padding: px2rem(60px);
	border-radius: 5px;

	.btn-close {
		position: absolute;
		z-index: 100;
		top: px2rem(-90px);
		right: px2rem(0);
		// left: 0;
		// margin: 0 auto;
		width: px2rem(80px);
		height: px2rem(80px);
		
		&::after,
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: px2rem(70px);
			height: 4px;
			border-radius: 2px;
			background-color: rgba(#000000, 0.6);
			transform: rotate(45deg);
			// box-shadow: 0 20px 50px rgba(0,0,0,0.3);
		}

		&::after {
			transform: rotate(-45deg);
		}

		&:hover {
			transform: rotate(90deg);
		}
	}
}
.form__loader {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: -4;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.form__content {
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	opacity: 0;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition: all 0.5s ease 0.7s;
	transition: all 0.5s ease 0.7s;
}
.form__cover {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: -4;
	border-radius: 7px;
	overflow: hidden;
	-webkit-transition: all 0.3s ease 0.8s;
	transition: all 0.3s ease 0.8s;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
.form__cover:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #131f4b;
	z-index: -4;
	border-radius: 50%;
	-webkit-transition: all 1.5s ease 0.3s;
	transition: all 1.5s ease 0.3s;
	-webkit-transform: scale(0);
	transform: scale(0);
}
.form__cover:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: white;
	z-index: -5;
	border-radius: 50%;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-transform: scale(0);
	transform: scale(0);
}
body.on-start .form__cover:before {
	-webkit-transform: scale(0.15);
	transform: scale(0.15);
}
body.document-loaded .form__loader {
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0;
	visibility: hidden;
}
body.document-loaded .form__content {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
	width: px2rem(590px);
}
body.document-loaded .form__cover {
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
body.document-loaded .form__cover:after {
	-webkit-transform: scale(2);
	transform: scale(2);
}
body.document-loaded .form__cover:before {
	-webkit-transition: opacity 0.3s ease 0.8s, -webkit-transform 2s ease;
	transition: opacity 0.3s ease 0.8s, -webkit-transform 2s ease;
	transition: transform 2s ease, opacity 0.3s ease 0.8s;
	transition: transform 2s ease, opacity 0.3s ease 0.8s, -webkit-transform 2s ease;
	-webkit-transform: scale(2);
	transform: scale(2);
	opacity: 0;
}
h1 {
	@include fs6;
	margin: px2rem(30px) 0 px2rem(40px) 0;
	letter-spacing: 0.05em;
	color: rgba(#fff, 0.8);
	font-weight: 700;
	img {
		display: block;
		margin: 0 auto;
		height: px2rem(70px);
	}
}
.styled-button {
	@include fs3;
	-webkit-appearance: none;
	-webkit-user-select: none;
	cursor: pointer;
	width: 100%;
	padding: px2rem(30px);
	line-height: px2rem(40px);
	outline: none;
	background: none;
	position: relative;
	color: rgba(#fff, 0.8);
	border-radius: px2rem(6px);
	// margin-bottom: px2rem(50px);
	border: none;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.1em;
	background: rgba(77, 147, 255, 0.8);
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	overflow: hidden;
}
.styled-button__real-text-holder {
	position: relative;
}
.styled-button__real-text {
	color: transparent;
	display: inline-block;
}
.styled-button__text-holder {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.styled-button__moving-block {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.styled-button__moving-block.back {
	color: white;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}
.styled-button__moving-block.back .styled-button__text-holder {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}
.styled-button:hover,
.styled-button:active {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	background: rgba(21, 44, 124, 0.5);
}
.styled-button:hover .face,
.styled-button:active .face {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}
.styled-button:hover .face .styled-button__text-holder,
.styled-button:active .face .styled-button__text-holder {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}
.styled-button:hover .back,
.styled-button:active .back {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
.styled-button:hover .back .styled-button__text-holder,
.styled-button:active .back .styled-button__text-holder {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
.styled-button:active {
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.styled-input {
	width: 100%;
	position: relative;
	margin-bottom: px2rem(50px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 3px;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	overflow: hidden;
}
.styled-input .code {
	@include fs3;
	height: px2rem(104px);
	line-height: px2rem(104px);
	background: none;
	border: none;
	color: rgba(136, 147, 172, 1);
	text-align: center;
	cursor: pointer;
	// font-weight: 600;
	// letter-spacing: 0.035em;
	padding: 0 px2rem(12px);
}
.styled-input__circle {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	overflow: hidden;
	border-radius: px2rem(6px);
}
.styled-input__circle:after {
	content: "";
	position: absolute;
	left: px2rem(33px);
	top: px2rem(38px);
	height: px2rem(28px);
	width: px2rem(28px);
	z-index: -2;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	box-shadow: 0 0 10px rgba(255, 255, 255, 0);
	-webkit-transition: opacity 1s ease, -webkit-transform 0.6s ease;
	transition: opacity 1s ease, -webkit-transform 0.6s ease;
	transition: transform 0.6s ease, opacity 1s ease;
	transition: transform 0.6s ease, opacity 1s ease, -webkit-transform 0.6s ease;
}
.styled-input__input {
	width: 83%;
	-webkit-appearance: none;
	font-size: px2rem(28px);
	outline: none;
	background: none;
	padding: px2rem(36px) 0px px2rem(36px) px2rem(80px);
	color: #fff;
	border: none;
	font-weight: 600;
	letter-spacing: 0.035em;
}

/* 火狐 */
input[type="number"] {
	-moz-appearance: textfield;
}
/* 表单框中placeholder */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	font-size: 14px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	color: #8893ac;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	font-size: 14px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	color: #8893ac;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
	font-size: 14px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	color: #8893ac;
}
input::placeholder,
textarea::placeholder {
	font-size: 14px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	color: #8893ac;
}

.styled-input:hover {
	border-color: rgba(255, 255, 255, 0.4);
}
.styled-input.filled {
	border-color: rgba(255, 255, 255, 0.2);
}
.styled-input.filled .styled-input__circle:after {
	-webkit-transform: scale(37);
	transform: scale(37);
	opacity: 0;
}

.spinner {
	position: relative;
	margin: auto;
	width: px2rem(100px);
	height: px2rem(100px);
	-webkit-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
}
.spinner__circular {
	-webkit-animation: rotate 1.5s linear infinite;
	animation: rotate 1.5s linear infinite;
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
	-webkit-transform-origin: center center;
	transform-origin: center center;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin: auto;
}

// 视频界面重置
.video .prism-player {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	// .prism-controlbar {
	// 	display: none !important;
	// }

	.prism-cc-btn,
	.prism-setting-btn,
	.volume-icon,
	.prism-detect-info,
	// .prism-progress,
	// .prism-time-display,
	.prism-fullscreen-btn,
	.prism-live-display,
	.prism-button.prism-button-orange {
		display: none;
	}
	.prism-big-play-btn {
		// top: 0;
		left: px2rem(20px) !important;
		bottom: px2rem(20px) !important;
		// margin: auto;
		width: px2rem(120px);
		height: px2rem(120px);
		transform: scale(0.7);
		.outter {
			width: px2rem(120px);
			height: px2rem(120px);
		}
	}
	.prism-error-content,
	.prism-ErrorMessage {
		display: none !important;
	}

	.u-fake-full-screen {
		position: absolute;
		z-index: 1000000;
		right: px2rem(25px);
		bottom: px2rem(12px);
		width: px2rem(50px);
		height: px2rem(50px);
		opacity: 0.9;

		&.z-full {
			i {
				&.i-full-screen {
					display: none;
				}

				&.i-small-screen {
					display: block;
				}
			}
		}

		i {
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: px2rem(36px);
			height: px2rem(36px);
			background-size: px2rem(36px);
			background-position: center;
			background-repeat: no-repeat;

			&.i-full-screen {
				display: block;
			}

			&.i-small-screen {
				display: none;
			}
		}
	}
}
/*|  公共函数                           
 ------------------------------------------------------------*/

/*|  公共函数                           
 ------------------------------------------------------------*/

/*|  公共函数                           
 ------------------------------------------------------------*/
.loading {
	text-align: center;
	position: fixed;
	height: 100vh;
	width: 100vw;
	background: #000;
	top: 0;
	z-index: 100;
}
.loading-icon {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.round {
	width: 4px;
	height: 4px;
	border-radius: 2px;
	background: #d4ba6a;
	position: absolute;
	animation: demo linear 0.8s infinite;
	-webkit-animation: demo linear 0.8s infinite;
}
.round:nth-child(1){
	left: 24px;
	top: 2px;
	animation-delay:0s;
}
.round:nth-child(2){
	left: 40px;
	top: 8px;
	animation-delay:0.1s;
}
.round:nth-child(3){
	left: 47px;
	top: 24px;
	animation-delay:0.1s;
}
.round:nth-child(4){
	left: 40px;
	top: 40px;
	animation-delay:0.2s;
}
.round:nth-child(5){
	left: 24px;
	top: 47px;
	animation-delay:0.4s;
}
.round:nth-child(6){
	left: 8px;
	top: 40px;
	animation-delay:0.5s;
}
.round:nth-child(7){
	left: 2px;
	top: 24px;
	animation-delay:0.6s;
}
.round:nth-child(8){
	left: 8px;
	top: 8px;
	animation-delay:0.7s;
}
@keyframes demo {
	0%,40%,100% {transform: scale(1);}
	20% {transform: scale(3);}
}
@-webkit-keyframes demo {
	0%,40%,100% {transform: scale(1);}
	20% {transform: scale(3);}
}